<template>
	<view class="security-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="navbar-title">安全设置</text>
			</view>
		</view>
		
		<!-- 安全等级卡片 -->
		<view class="security-level">
			<view class="level-card">
				<view class="level-header">
					<view class="level-icon">
						<text class="shield-icon">🛡️</text>
					</view>
					<view class="level-info">
						<text class="level-title">账号安全等级</text>
						<text class="level-desc">保护您的数据安全</text>
					</view>
					<view class="level-badge high">
						<text class="badge-text">高</text>
					</view>
				</view>
				<view class="level-progress">
					<view class="progress-bar">
						<view class="progress-fill" style="width: 85%"></view>
					</view>
					<text class="progress-text">85%</text>
				</view>
			</view>
		</view>
		
		<!-- 安全设置列表 -->
		<view class="security-list">
			<view class="section-card">
				<!-- 修改密码 -->
				<view class="security-item" @click="changePassword">
					<view class="item-icon password">
						<text class="icon-text">🔑</text>
					</view>
					<view class="item-content">
						<text class="item-title">修改密码</text>
						<text class="item-desc">定期更换密码，保护账户安全</text>
					</view>
					<text class="item-arrow">›</text>
				</view>
				
				<!-- 账号注销 -->
				<view class="security-item danger" @click="deleteAccount">
					<view class="item-icon delete">
						<text class="icon-text">⚠️</text>
					</view>
					<view class="item-content">
						<text class="item-title">账号注销</text>
						<text class="item-desc">永久删除账号和所有数据</text>
					</view>
					<text class="item-arrow">›</text>
				</view>
			</view>
		</view>
		
		<!-- 修改密码弹窗 -->
		<view class="password-modal" v-if="showPasswordModal" @click="hidePasswordModal">
			<view class="modal-content" @click.stop>
				<view class="modal-header">
					<view class="header-icon">
						<text class="lock-icon">🔒</text>
					</view>
					<text class="modal-title">修改密码</text>
					<text class="modal-subtitle">请输入密码信息</text>
				</view>
				
				<view class="form-container">
					<view class="input-group">
						<input 
							v-model="passwordForm.oldPassword" 
							type="password" 
							placeholder="请输入当前密码" 
							class="password-input"
						/>
					</view>
					<view class="input-group">
						<input 
							v-model="passwordForm.newPassword" 
							type="password" 
							placeholder="请输入新密码（至少6位）" 
							class="password-input"
						/>
					</view>
					<view class="input-group">
						<input 
							v-model="passwordForm.confirmPassword" 
							type="password" 
							placeholder="请确认新密码" 
							class="password-input"
						/>
					</view>
				</view>
				
				<view class="modal-actions">
					<view class="action-btn cancel-btn" @click="hidePasswordModal">
						<text class="btn-text">取消</text>
					</view>
					<view class="action-btn confirm-btn" @click="confirmPasswordChange">
						<text class="btn-text">确认修改</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'

export default {
	data() {
		return {
			statusBarHeight: 0,
			showPasswordModal: false,
			passwordForm: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			}
		}
	},
	onLoad() {
		this.getStatusBarHeight()
	},
	methods: {
		// 获取适配的状态栏高度
		getStatusBarHeight() {
			const systemInfo = uni.getSystemInfoSync();
			let statusBarHeight = systemInfo.statusBarHeight || 0;
			
			// #ifdef MP-WEIXIN
			if (statusBarHeight === 0) {
				statusBarHeight = 25;
			}
			statusBarHeight = Math.max(statusBarHeight, 22);
			// #endif
			
			// #ifdef MP-ALIPAY
			if (statusBarHeight === 0) {
				statusBarHeight = 20;
			}
			// #endif
			
			// #ifdef H5
			statusBarHeight = 0;
			// #endif
			
			this.statusBarHeight = statusBarHeight;
		},
		
		goBack() {
			uni.navigateBack()
		},
		
		changePassword() {
			this.showPasswordModal = true
		},
		
		hidePasswordModal() {
			this.showPasswordModal = false
			this.passwordForm = {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			}
		},
		
		confirmPasswordChange() {
			const { oldPassword, newPassword, confirmPassword } = this.passwordForm
			
			if (!oldPassword || !newPassword || !confirmPassword) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				})
				return
			}
			
			if (newPassword !== confirmPassword) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				})
				return
			}
			
			if (newPassword.length < 6) {
				uni.showToast({
					title: '密码长度至少6位',
					icon: 'none'
				})
				return
			}
			
			const currentUser = storage.getCurrentUser()
			if (currentUser && currentUser.password === oldPassword) {
				const updatedUser = {
					...currentUser,
					password: newPassword
				}
				
				storage.updateUser(updatedUser)
				
				uni.showToast({
					title: '密码修改成功',
					icon: 'success'
				})
				
				this.hidePasswordModal()
			} else {
				uni.showToast({
					title: '当前密码错误',
					icon: 'none'
				})
			}
		},
		
		deleteAccount() {
			uni.showModal({
				title: '账号注销警告',
				content: '账号注销后将永久删除所有数据，且无法恢复。确定要继续吗？',
				confirmColor: '#ff4757',
				confirmText: '确认注销',
				success: (res) => {
					if (res.confirm) {
						uni.showModal({
							title: '最终确认',
							content: '您真的要注销账号吗？此操作不可撤销！',
							confirmColor: '#ff4757',
							confirmText: '我已了解风险',
							success: (res2) => {
								if (res2.confirm) {
									// 执行账号注销逻辑
									storage.logout()
									storage.clearAllData()
									
									uni.showToast({
										title: '账号已注销',
										icon: 'success'
									})
									
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/public/login'
										})
									}, 1500)
								}
							}
						})
					}
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.security-container {
	min-height: 100vh;
	position: relative;
}

.gradient-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	z-index: 0;
}

.custom-navbar {
	position: relative;
	z-index: 1;
	height: 88rpx;
	margin-top: var(--status-bar-height);
	background: transparent;
	padding-top: 60rpx;
}

.navbar-content {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}

.navbar-left {
	width: 80rpx;
	height: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.navbar-left:active {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(0.95);
}

.back-icon {
	font-size: 40rpx;
	color: #fff;
	font-weight: 300;
}

.navbar-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.security-level {
	position: relative;
	z-index: 1;
	padding: 40rpx 30rpx;
}

.level-card {
	background: rgba(255, 255, 255, 1);
	border-radius: 30rpx;
	padding: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
}

.level-header {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.level-icon {
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
}

.shield-icon {
	font-size: 36rpx;
}

.level-info {
	flex: 1;
}

.level-title {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 6rpx;
}

.level-desc {
	display: block;
	font-size: 26rpx;
	color: #666;
}

.level-badge {
	padding: 12rpx 24rpx;
	border-radius: 25rpx;
	
	&.high {
		background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
		
		.badge-text {
			color: #fff;
			font-weight: 600;
		}
	}
}

.badge-text {
	font-size: 24rpx;
}

.level-progress {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.progress-bar {
	flex: 1;
	height: 12rpx;
	background: #f0f0f0;
	border-radius: 6rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #51cf66 0%, #40c057 100%);
	border-radius: 6rpx;
	transition: width 0.6s ease;
}

.progress-text {
	font-size: 26rpx;
	font-weight: 600;
	color: #51cf66;
}

.security-list {
	position: relative;
	z-index: 1;
	padding: 0 30rpx 40rpx;
}

.section-card {
	background: rgba(255, 255, 255, 1);
	border-radius: 30rpx;
	padding: 20rpx 0;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
}

.security-item {
	display: flex;
	align-items: center;
	padding: 32rpx 40rpx;
	transition: all 0.3s ease;
	
	&:active {
		background: rgba(166, 192, 254, 0.1);
		transform: scale(0.98);
	}
	
	&.danger:active {
		background: rgba(255, 107, 107, 0.1);
	}
}

.item-icon {
	width: 88rpx;
	height: 88rpx;
	border-radius: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 28rpx;
	
	&.password {
		background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	}
	
	&.delete {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	}
}

.icon-text {
	font-size: 36rpx;
}

.item-content {
	flex: 1;
}

.item-title {
	display: block;
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 8rpx;
}

.item-desc {
	display: block;
	font-size: 26rpx;
	color: #666;
}

.item-arrow {
	font-size: 36rpx;
	color: #ccc;
	margin-left: 20rpx;
}

.password-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.modal-content {
	width: 600rpx;
	background: #ffffff;
	border-radius: 30rpx;
	padding: 50rpx 40rpx;
	margin: 0 30rpx;
	animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: scale(0.8) translateY(100rpx);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.modal-header {
	text-align: center;
	margin-bottom: 40rpx;
}

.header-icon {
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20rpx;
}

.lock-icon {
	font-size: 40rpx;
}

.modal-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #333;
	margin-bottom: 10rpx;
}

.modal-subtitle {
	font-size: 26rpx;
	color: #666;
}

.form-container {
	margin-bottom: 40rpx;
}

.input-group {
	margin-bottom: 24rpx;
}

.password-input {
	width: 100%;
	height: 96rpx;
	background: #f8f9fa;
	border: 2rpx solid transparent;
	border-radius: 20rpx;
	padding: 0 30rpx;
	font-size: 30rpx;
	color: #333;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.password-input:focus {
	background: #ffffff;
	border-color: #a6c0fe;
	box-shadow: 0 0 0 6rpx rgba(166, 192, 254, 0.1);
}

.modal-actions {
	display: flex;
	gap: 20rpx;
}

.action-btn {
	flex: 1;
	height: 88rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.cancel-btn {
	background: #f8f9fa;
	border: 2rpx solid #e9ecef;
	
	.btn-text {
		color: #666;
		font-size: 30rpx;
		font-weight: 500;
	}
	
	&:active {
		background: #e9ecef;
		transform: scale(0.98);
	}
}

.confirm-btn {
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	
	.btn-text {
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 600;
	}
	
	&:active {
		transform: scale(0.98);
		filter: brightness(0.95);
	}
}
</style> 